<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition template="template/layoutAluno.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">
	<ui:define name="conteudo">
		<div style="margin: 10px 10px 0 10px;">
			<h:form>
				<div style="float: left;">
					<h:graphicImage url="/fotos/livro/#{detalheLivroBEAN.livro.id}.jpg" width="150px"
						height="190px" />
				</div>
				<div>
					<p:fieldset>
						<h3>
							<h:outputText value="#{detalheLivroBEAN.livro.nome}" />
						</h3>
						<br />
						<hr />
				Ano: <h:outputText value="#{detalheLivroBEAN.livro.ano}" />
						<br />
				Idioma: <h:outputText value="#{detalheLivroBEAN.livro.idioma}" />
						<br />
				Paginas: <h:outputText value="#{detalheLivroBEAN.livro.paginas}" />
						<br />
				Categoria: <h:outputText
							value="#{detalheLivroBEAN.livro.categorias.descricao}" />
						<br />
				Autor: <h:outputText value="#{detalheLivroBEAN.livro.autores.nome}" />
						<br />
				Descricao: <h:outputText value="#{detalheLivroBEAN.livro.descricao}" />
						<br />
					</p:fieldset>
				</div>
				<div>
					<p:fieldset id="detalheLivro">
						<div style="vertical-align: middle;">
							<h:graphicImage url="/images/comentario.gif" />
							<p:commandLink value="Postar comentário"
								oncomplete="dialogComentario.show()" />
							<br/>
							<br/>
							<p:dataTable var="m" value="#{detalheLivroBEAN.livro.comentario}" rendered="#{not empty detalheLivroBEAN.livro.comentario}">>
								<p:column style="width:100px">
									<f:facet name="header">
										<h:outputText value="Data" />
									</f:facet>
									<h:outputText value="#{m.postagem}" id="dataM">
										<f:convertDateTime for="dataM" dateStyle="short" type="date" pattern="dd/MM/yyyy" />
									</h:outputText>
								</p:column>
								<p:column style="width:100px">
									<f:facet name="header">
										<h:outputText value="Avaliação" />
									</f:facet>
									<p:rating value="#{m.nota}" readonly="true"/>
								</p:column>
								<p:column>
									<f:facet name="header">
										<h:outputText value="Mensagem" />
									</f:facet>
									<h:outputText value="#{m.comentario}" />
								</p:column>
								<p:column style="width:150px">
									<f:facet name="header">
										<h:outputText value="Usuário" />
									</f:facet>
									<h:outputText value="#{m.usuario.nome}" />
								</p:column>
							</p:dataTable>
						</div>
					</p:fieldset>
				</div>

				<p:dialog header="Comentários" resizable="false"
					widgetVar="dialogComentario" width="500" hideEffect="fade"
					showEffect="fade">
					<p:rating value="#{detalheLivroBEAN.comentario.nota}" cancel="false"/>
					<br />
					<p:outputLabel value="Comentário:" for="textArea" style="width: 400px;" />
					<br />
					<p:inputTextarea id="textArea"
						value="#{detalheLivroBEAN.comentario.comentario}" />
					<br />
					<p:commandButton value="Comentar"
						oncomplete="dialogComentario.hide()"
						action="#{detalheLivroBEAN.addComentario()}" update="detalheLivro">
						<f:setPropertyActionListener target="#{detalheLivroBEAN.livro}"
							value="#{detalheLivroBEAN.livro}" />
					</p:commandButton>

				</p:dialog>
			</h:form>
		</div>
	</ui:define>
</ui:composition>
